<template>
    <view>
      <form>

        <xmInfo
        :projectno="dataInfo.projInfo.projectno"
        :projectname="dataInfo.projInfo.projectname"
      ></xmInfo>
        <view class="cu-bar bg-white">
          <view class="action"><text class="cuIcon-kb text-xs text-red"></text>发起备注</view>
        </view>
        <view class="cu-form-group">
          <textarea
            maxlength="-1"
            :disabled="true"
            :value="dataInfo.remarks"
            
          ></textarea>
        </view>

        <view class="cu-form-group" style="min-height: 0"></view>
        <view class="cu-bar bg-white">
			<!-- <text class="cuIcon-kb text-xs text-red"></text> -->
          <view class="action">开工通知书等图片</view>
        </view>
        <view class="cu-form-group">
          <js-uploadfile
              v-model="dataInfo.dataMap"
              :biz-key="dataInfo.id"
              biz-type="PmAcceptance_create_image"
              :deletable="false"
              customBtn="false"
          ></js-uploadfile>
        </view>
        
        <view class="cu-form-group" style="min-height: 0"></view>
        <view class="cu-bar bg-white">
          <view class="action"><text class="cuIcon-kb text-xs text-red"></text>中间验收表(EXCEL)</view>
        </view>
        <view class="cu-form-group">
          <js-uploadfile
                v-model="dataInfo.dataMap"
                :biz-key="dataInfo.id"
                biz-type="PmAcceptance_midYs_file"
                :deletable="false"
                customBtn="false"
                uploadType="all"
                uploadText="请上传文件"
            ></js-uploadfile>
        </view>  
        <view class="cu-form-group">
          <view class="title">申请人</view>
          <view>{{ dataInfo.createByName  ? dataInfo.createByName : '' }}</view>
        </view>
        <view class="cu-form-group">
          <view class="title">申请时间</view>
          <view>{{ dataInfo.createDate  ? dataInfo.createDate : '' }}</view>
        </view>
        <view class="cu-form-group ">
          <view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>验收人</view>
          <view>
            <u-input  placeholder="请输入" v-model="dataInfo.pername" type="text" maxlength="200"
              class="input-align"></u-input>
          </view>
        </view>
        <view class="cu-form-group ">
          <view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>验收结果</view>
          <view>
            <js-radio  v-model="dataInfo.checkResult" dict-type="zf_check_result" style="text-align: right;"></js-radio>
          </view>
        </view>
        <view class="cu-form-group ">
          <view class="title"><text class="cuIcon-favorfill text-xs text-red"></text>验收日期</view>
          <picker
              mode="date"
              :value="dataInfo.launchtime ? dataInfo.launchtime : date"
              start="2015-09-01"
              @change="DateChange('launchtime', $event)"
            >
              <view class="picker">
                {{ dataInfo.launchtime ? dataInfo.launchtime : "请选择验收日期" }}
              </view>
            </picker>
        </view>
        <view class="cu-form-group" style="min-height: 0"></view>
        <view class="cu-bar bg-white">
          <!-- cuIcon-favorfill -->
          <view class="action"><text class="cuIcon-kb text-xs text-red"></text>不合格描述</view>
        </view>
        <view class="cu-form-group">
          <textarea
            maxlength="-1"
            v-model="dataInfo.unqualified"
            placeholder="不合格描述"
          ></textarea>
        </view>
        <view class="cu-form-group" style="min-height: 0"></view>
        <view class="cu-bar bg-white">
          <view class="action"><text class="cuIcon-kb text-xs text-red"></text>验收图片</view>
        </view>
        <view class="cu-form-group">
          <js-uploadfile
              v-model="dataInfo.dataMap"
              :biz-key="dataInfo.id"
              biz-type="PmAcceptance_result_image"
          ></js-uploadfile>
        </view>
        <view style="height: 180rpx"></view>
        <view class="btn-group cu-bar foot cu-bar1">
          
          <view class="flex">
              <js-bpm-button
            v-model="dataInfo.bpm"
            :biz-key="dataInfo.id"
            form-key="Flow_PmAcceptance"
            @complete="submit"
          ></js-bpm-button>
          </view>
        </view>
      </form>
    </view>
  </template>
  <script>

  import xmInfo from "@/pages/zfgs/index/componetns/xmInfo.vue";
  import {hasPermission} from '@/common/fire.js'
  export default {
    components: {
      xmInfo
    },
    data() {
      return {
        uploadOptions: {},
        switchA: false,
        date: new Date().toISOString().substring(0, 10),
        modalName: null,
        modalNameDetail: null,
        showAddDetail: false,
        dataInfo: {
          id: "",
          bpm: {},
          pmMaterialchecksList: [],   
        },
        isSubmitting: false,
        showButton: true,
        flag: hasPermission('material:check:pmMaterialcheck:edit'),
        x: 650, //x坐标
        y: 650, //y坐标
        addflag:hasPermission('btn:add:cailiaochoujian'),
        editflag:hasPermission('btn:edit:cailiaochoujian'),
      };
    },
    onLoad(e) {
      if (!!e.id) {
        this.showButton = true;
        this.getPmAcceptanceForm(e.id);
      }
      if (!!e.xm) {
        this.showButton = true;
        this.dataInfo = JSON.parse(e.xm);
        //   巡检人
        this.dataInfo.state = 1;
      }

    },
    methods: {
      DateChange(item, e) {
        if (item === "launchtime") {
          this.dataInfo.launchtime = e.detail.value;
        } 
        this.$forceUpdate();
      },
      submit() {
        if (!this.dataInfo.pername) {
          this.$u.toast("请输入验收人");
          return;
        }
        if (!this.dataInfo.checkResult) {
          this.$u.toast("请选择验收结果");
          return;
        }
        if (!this.dataInfo.launchtime) {
          this.$u.toast("请选择验收日期");
          return;
        }
        // this.dataInfo.checkResult 为年月日，格式化加上时分秒
        this.dataInfo.launchtime = this.dataInfo.launchtime + " 00:00:00";
        if (this.isSubmitting) {
          return;
        } else {
          this.isSubmitting = true;
          try {
              this.dataInfo.status = 4;
            this.$u.api.zfgs
              .pmAcceptanceResultSave(this.dataInfo)
              .then((res) => {
                if (res.result == "true") {
                  this.$u.toast(res.message);
                  setTimeout(() => {
                    uni.navigateBack({
                      delta: 1,
                    });
                  }, 500);
                }else{
                  this.$u.toast(res.message);
                }
              });
          } catch (error) {
            this.$u.toast(error.message);
          } finally {
            this.isSubmitting = false;
          }
        }
      },
  
      getPmAcceptanceForm(id) {
        this.$u.api.zfgs
          .pmAcceptanceForm({
            id: id,
          })
          .then((res) => {
            this.dataInfo = res.pmAcceptance;
          });
      },
  
    },
  };
  </script>
  <style lang="scss" scoped>
  $all_width: 140rpx;
  $all_height: 140rpx;
  .movable-area {
    z-index: 999;
    height: 97vh;
    width: 650rpx;
    // max-width: 1152rpx;
    // 固定在右边
    top: -150rpx;
    position: fixed;
    right: $all_width;
    // 固定在右下角
    pointer-events: none; //此处要加，鼠标事件可以渗透
    .movable-view {
      width: $all_width;
      height: $all_height;
      pointer-events: auto; //恢复鼠标事件
      .cu-bar{
        width: 320rpx;
      }
    }
  }
  .action {
    color: #303133;
  }
  .cu-form-group {
    flex-wrap: wrap;
  }
  .text-sl {
    font-size: 22px !important;
  }
  .cu-bar1 {
    min-height: 80px;
  }
  .cu-btn {
    font-size: 16px;
    height: 40px;
  }
  .foot {
    z-index: 997;
    background: #fff;
  }
  .green {
    color: green;
  }
  .input-align {
    text-align: right;
  }
  .sub-title{
    flex-grow: 1; /* 让右侧内容占据剩余空间 */
    max-width: 200px; /* 或其他合适的最大宽度，超过这个宽度时内容会换行 */
    word-break: break-word; /* 或 overflow-wrap: break-word; 允许单词在必要时断开以适应宽度 */
  }
  .xm-title{
    flex-basis: 100px; /* 或其他合适的固定宽度，用于左侧标题 */
    flex-shrink: 0; /* 防止标题在小屏幕下收缩 */
    overflow: hidden; /* 可选，防止内容溢出 */
  }
  .text-xsl {
    font-size: 60rpx !important;
  }
  .flex-end {
    display: flex;
    justify-content: flex-end;
  }
  .text-xs {
    font-size: 18rpx !important;
  }
  .cu-item{
    border: 1px solid #39b54a;
  }
  .cuIcon-kb::before {
      // content 为空白
      display: inline-block;
      content: ' ';
      width: 18rpx;
      height: 100%;
      
  }
  ::v-deep .u-input__input{
    text-align: right;
  }
  </style>